<template>
  <div>
      <div class="goods">
        <div class="goods-lists"
             v-for="(item, index) in goodsList" 
             :key="index" 
             @click="goGoodsData(item)"
             v-show="index>=8 && index<=11">
          <div class="goods-img">
            <img :src="item.pic"/>
          </div>
          <div class="text">
            <div class="right-title">{{item.name}}</div>
            <div class="right-desc">{{item.characteristic}}</div>
            <div style="color:red">￥{{item.minBuyNumber}}</div>
          </div>
        </div>
       </div>
  </div>
</template>

<script>
// import PATH from '../../router/constant'
export default {
    data() {
        return {
            goodsList: []
        }
    },
    mounted() {
        this.$API.getShopList().then(res=> {
            // console.log(res.data.data)
            this.goodsList = res.data.data
        })
    },
    methods: {
      goGoodsData(item) {
        this.$router.push({
          path: "/popularity",
          query: {
            id: item.id
          }
        })
      }
    }
}
</script>

<style scoped>
.goods {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  font-size: 0.3rem;
}
.goods-lists {
  width: 45%;
  height: 5.5rem;
  margin: 0.1rem;
}
.goods-img img {
  width: 100%;
  height: 4rem;
}
.text {
font-size: 0.28rem;
}
.right-title {  
  overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap; 
}
.right-desc {
    font-size: 0.25rem;
    margin: 0.1rem 0;
    color: #666;
  overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
</style>